<template>
    <div class="subpage personal-container">
        <ul class="info-list">
            <li class="head-info">
                <div class="tag-name">头像</div>
                <div class="specific-info">
                    <span class="sub-name"></span>
                    <div class="head-img">
                        <img :src="headPic || require('@/assets/img/head_img.png')" alt="">
                        <!-- <van-uploader :after-read="afterRead" class="upload" /> -->
                    </div>
                </div>
            </li>
            <li @click="jumpNickName">
                <div class="tag-name">昵称</div>
                <div class="specific-info">
                    <span class="sub-name">{{nickName}}</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li @click="changeGender">
                <div class="tag-name">性别</div>
                <div class="specific-info">
                    <span class="sub-name">{{gender}}</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
        </ul>
        <ul class="info-list">
            <li v-if="!userName" @click="jumpView('certification')">
                <div class="tag-name">实名信息</div>
                <div class="specific-info">
                    <span class="sub-name color-gray">我要实名</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li v-if="userName">
                <div class="tag-name">实名信息</div>
                <div class="specific-info">
                    <span class="sub-name">{{userName}}</span>
                </div>
            </li>
            <li v-if="userName">
                <div class="tag-name">身份证号码</div>
                <div class="specific-info">
                    <span class="sub-name">{{idCard}}</span>
                </div>
            </li>
            <li @click="jumpBank">
                <div class="tag-name">银行卡</div>
                <div class="specific-info">
                    <span class="sub-name color-gray" v-if="!bankName">我要绑定</span>
                    <span class="sub-name" v-if="bankName">{{bankName}} {{bankCard}}</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
        </ul>
        <ul class="info-list">
            <li class="address-bind" @click="jumpAddressList">
                <div class="tag-name address-name">收货地址</div>
                <div class="specific-info" v-if="!haveAddress">
                    <span class="sub-name color-gray">添加地址</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
                <div class="right-info" v-else>
                    <div class="right-specific-info">
                        <span class="sub-name">{{address.name}} {{address.tel}}</span>
                        <van-icon name="arrow" class="arrow-right" />
                    </div>
                    <div class="address-info">
                        <p>{{address.province}} {{address.city}} {{address.county}} {{address.addressDetail}}</p>
                    </div>
                </div>
            </li>
        </ul>

        <van-action-sheet
            v-model="showAction"
            :actions="actions"
            cancel-text="取消"
            @select="selectGender"
            @cancel="showAction = false"
        />
    </div>
</template>

<script>
import Storage from "@/utils/storage";
import { Uploader, Dialog, ActionSheet } from 'vant';
import { parse } from 'path';
export default {
    components:{
        [Uploader.name]:Uploader,
        [Dialog.name]:Dialog,
        [ActionSheet.name]:ActionSheet
    },
    data() {
        return {
            nickName: '',
            headPic: '',
            gender: '',
            userName: '',
            idCard: '',
            bankCard: '',
            bankName: '',
            address: {
                name: '',
                tel: '',
                province: '',
                city: '',
                county: '',
                addressDetail: ''
            },
            haveAddress: false,
            showAction: false,
            actions: [
                { name: '男'},
                { name: '女'},
            ]
        }
    },
    created() {
        this.$api.get('/api/user/detail')
            .then((res) => {
                this.$store.commit("setUserInfo", res.data);
                this.headPic = res.data.headPic;
                this.nickName = res.data.nickName;
                this.gender = res.data.gender;
                this.userName = res.data.userName;
                this.idCard = res.data.idCard;
                this.bankCard = res.data.cardNumber ? res.data.cardNumber.substr(-4) : '';
                this.bankName = res.data.bankName;
                if(res.data.province){
                    this.haveAddress = true;
                }
                this.address.name = res.data.name
                this.address.tel = res.data.tel
                this.address.province = res.data.province
                this.address.city = res.data.city
                this.address.county = res.data.county
                this.address.addressDetail = res.data.addressDetail
            })
    },
    methods: {
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log("file:",file);
        },
        jumpView(viewName) {
            this.$router.push({name: viewName})
        },
        jumpNickName() {
            this.$router.push({
                name: 'editNickName',
                query: {
                    nickName: this.nickName
                }
            })
        },
        jumpBank() { //银行卡
            if(this.userName){
                if(this.bankCard){
                    this.$router.push({
                        name: 'bankCardList'
                    })
                }else{
                    this.$router.push({
                        name: 'bindBankCard'
                    })
                }
            }else{
                Dialog.confirm({
                    cancelButtonColor: '#969C9E',
                    confirmButtonText: '去认证',
                    title: '提示',
                    message: '绑定银行卡需实名认证'
                }).then(() => {
                    // on confirm
                    this.$router.push({
                        name: 'certification'
                    })
                }).catch(() => {
                    // on cancel
                });
            }
        },
        jumpAddressList() { //地址
            this.$router.push({
                path: '/home/addresslist/1',
                query: {
                    from: 'personalInfo'
                }
            })
        },
        replaceView(viewName) { //跳转页面无历史记录
            this.$router.replace({name: viewName})
        },
        changeGender() {  //选择性别
            this.showAction = true;
        },
        selectGender(item) { //选择性别
            this.gender = item.name;
            this.showAction = false;
            let postData = {
                sex: item.name
            }
            this.$api.post('/api/user/set_sex?noLoading', postData)
                .then((res) => {
                    this.$tool.toast('已修改', 800)
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .personal-container {
        .info-list {
            width: 100%;
            margin-bottom: 10px;
            background-color: #fff;
            li {
                width: 100%;
                padding: 20px 16px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                color: #5D6164;
                border-bottom: 1px solid #f8f8f8;
                :last-child {
                    border-bottom: none;
                }
                .tag-name {
                    width: 118px;
                }
                .specific-info {
                    display: flex;
                    flex: 1;
                    justify-content: space-between;
                    align-items: center;
                    .head-img {
                        position: relative;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        overflow: hidden;
                        background-color: #f8f8f8;
                        img {
                            width: 40px;
                            height: 40px;
                            object-fit: cover;
                        }
                        .upload {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 40px;
                            height: 40px;
                            opacity: 0;
                        }
                    }
                }
                .address-name {
                    align-self: flex-start;
                }
                .right-info {
                    display: flex;
                    flex: 1;
                    justify-content: space-between;
                    flex-direction: column;
                    .right-specific-info {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    .address-info {
                        margin-top: 6px;
                        font-size: 14px;
                        color: #969C9E;
                        p {
                            line-height: 20px;
                            padding-right: 20px;
                        }
                    }
                }
            }
            .head-info {
                padding: 16px;
            }
        }
    }
</style>